.features__title {
  margin-block: 20px 40px;
  font-family: $font-title;
  font-size: 36px;
  line-height: 40px;
  font-weight: 400;

  @media (min-width: $tablet-width) {
    margin-block: 45px 32px;
    font-size: 60px;
    line-height: 1;
  }
}

.features__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  margin-block-end: 49px;
  padding: 0;
  list-style-type: none;
  color: $special_dark_grey;
  counter-reset: cnt;

  @media (min-width: $tablet-width) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 37px;
    margin-block-end: 0;
    padding-block-end: 47px;
    font-size: 16px;
    line-height: 24px;

    &::after {
      position: absolute;
      content: "";
      bottom: 0;
      inline-size: 100%;
      block-size: 2px;
      background-color: #E6E6E6;
    }
  }

  @media (min-width: $desktop-width) {
    grid-template-columns: repeat(4, 1fr);
    padding-block-end: 26px;
    margin-block-end: 179px;
  }
}

.features__item {
  position: relative;
  padding-inline-start: 80px;
  padding-block: 2px 4px;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  background-position: left top;
  counter-increment: cnt 1;

  @media (min-width: $tablet-width) {
    padding-inline-start: 0;
    padding-block: 151px 57px;
    background-size: 80px 80px;
    background-position: left top 40px;
    font-size: 16px;
    line-height: 24px;

    &::after {
      position: absolute;
      content: counter(cnt);
      top: 0;
      left: 118px;
      z-index: -1;
      font-family: $font-title;
      font-size: 280px;
      line-height: 1;
      color: $basic_grey;
    }
  }
}

.features__item--leaf {
  background-image: url("../../img/leaf.svg");
}

.features__item--powder {
  background-image: url("../../img/powder.svg");
}

.features__item--meal {
  background-image: url("../../img/meal.svg");
}

.features__item--weight {
  background-image: url("../../img/weight.svg");
}

.features__item--weight br {
  display: none;
}